<!-- 风向图 -->
<template>
    <div class="echart-box">
        <div v-if="data.length" ref="chart" class="echart_contain"></div>
        <img
            v-else
            src="@/assets/images/noData_dark.png"
            class="img"
            alt=""
            srcset=""
        />
    </div>
</template>

<script>
import * as echarts from 'echarts';
import arrowIcon from '@/assets/images/purple_up.png'; //风向箭头，默认北风
export default {
    props: {
        data: {
            type: Array
        }
    },
    data() {
        return {
            timer: '', //图例切换定时器
            index: 0, //当前legend索引
            units: {
                风向: 'm/s',
                风速: 'm/s',
                风速风向: 'm/s',
                风向风速: 'm/s',
                能见度: 'm',
                湿度: '%',
                温度: '℃',
                气压: 'hpa',
                大气压: 'hpa',
                TSP: 'μg/m³',
                'O₃': 'mg/m³',
                'PM₂.₅': 'mg/m³',
                'PM₁₀': 'mg/m³',
                'SO₂': 'mg/m³',
                undefined: '-',
                null: '-'
            }, //单位合集
            options: {
                grid: {
                    top: '18%',
                    bottom: '18%'
                },
                legend: {
                    selectedMode: 'single'
                },
                dataset: {
                    dimensions: ['jcsj', '风向风速', '温度', '湿度', '气压'],
                    source: [] //数据集
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false //去掉刻度线
                    },
                    axisLabel: {
                        // 格式化时间
                        formatter: val => {
                            if (val) {
                                const day = val.split(' ')[0];
                                const hour = val.split(' ')[1];
                                return day + '\n' + hour;
                            } else {
                                return '';
                            }
                        }
                    }
                },
                yAxis: {
                    name: 'm/s',
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'dotted' //设置分割线样式为虚线
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis', //触发方式为x轴触发
                    axisPointer: {
                        type: 'cross' //设置指示器类型为 cross:十字准星指示器  line:垂直线
                    },
                    // //换行: <br />不管用就用 \n
                    formatter: params => {
                        // console.log('params', params);
                        // 当trigger设置成'axis',params就是数组，否则就是对象
                        let header = params[0].name + '<br />';
                        let str = '';
                        if (params[0].seriesName == '风向风速') {
                            for (let i = 0; i < params.length; i++) {
                                str +=
                                    params[i].marker +
                                    '风向：' +
                                    params[i].data.fxmc +
                                    '<br />' +
                                    params[i].marker +
                                    '风速：' +
                                    params[i].data.fsz +
                                    this.units[params[i].seriesName];
                            }
                        } else {
                            for (let i = 0; i < params.length; i++) {
                                str +=
                                    params[i].marker +
                                    params[i].seriesName +
                                    '：' +
                                    params[i].value[params[i].seriesName] +
                                    this.units[params[i].seriesName];
                            }
                        }

                        return header + str;
                    }
                },
                series: [
                    {
                        type: 'line',
                        symbol: 'image://' + arrowIcon,
                        symbolSize: 12,
                        symbolRotate: val => {
                            return val.symbolRotate;
                        }
                    },
                    { type: 'line' },
                    { type: 'line' },
                    { type: 'line' }
                ]
            }
        };
    },
    watch: {
        data: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    this.initEcharts();
                });
            }
        }
    },
    mounted() {
        this.initEcharts();
    },
    beforeDestroy() {
        this.concelLegendEvent();
        this.concelMouseEvent();
    },
    methods: {
        // 初始化图表
        initEcharts() {
            if (this.$handleStr.hasValue(this.data)) {
                const echartDom = this.$refs.chart;
                const myChart = echarts.init(echartDom);
                // 数据回来前加入loading效果
                myChart.showLoading();
                this.options.dataset.source = this.data.map(item => {
                    return {
                        ...item,
                        jcsj: item.jcsj
                            ? this.$dayjs(item.jcsj).format('MM-DD HH:mm')
                            : '',
                        风向风速: item.fsz,
                        温度: item.wendu,
                        湿度: item.sd,
                        气压: item.yl,
                        symbolRotate: this.setRotate(item.fxz), //根据风向值计算旋转角度
                        fxmc: this.setFxMC(item.fxz) //根据风向值设置风向名称
                    };
                });
                // 模拟异步数据
                setTimeout(() => {
                    myChart.setOption(this.options);
                    myChart.hideLoading();
                }, 1000);

                this.setLegendEvent(myChart);
                this.setMouseEvent();
            }
        },
        // 设置图例事件
        setLegendEvent(myChart) {
            const legendNames = ['风向风速', '温度', '湿度', '气压'];
            // 监听图例点击事件
            myChart.on('legendselectchanged', params => {
                this.index = legendNames.indexOf(params.name);
                // 更新图表配置
                myChart.setOption({
                    yAxis: {
                        name: this.units[params.name]
                    }
                });
            });
            // 图例自动切换
            this.timer = setInterval(() => {
                if (this.index <= 2) {
                    this.index++;
                } else {
                    this.index = 0;
                }
                myChart.dispatchAction({
                    type: 'legendToggleSelect',
                    name: legendNames[this.index]
                });
            }, 4000);
        },
        // 取消图例事件
        concelLegendEvent() {
            const echartDom = this.$refs.chart;
            const myChart = echarts.init(echartDom);
            // 销毁图例监听
            myChart.off('legendselectchanged');
            // 销毁定时器
            clearInterval(this.timer);
        },
        // 设置鼠标事件
        setMouseEvent() {
            const echartDom = this.$refs.chart;
            //  鼠标悬停 == 鼠标移入到鼠标溢出的这段时间
            // 鼠标进入事件
            echartDom.addEventListener('mouseover', this.mouseOver);
            // 鼠标移出事件
            echartDom.addEventListener('mouseout', this.mouseOut);
        },
        // 取消鼠标事件
        concelMouseEvent() {
            echartDom.removeEventListener('mouseover', this.mouseOver);
            echartDom.removeEventListener('mouseout', this.mouseOut);
        },
        // 鼠标移入事件
        mouseOver() {
            clearInterval(this.timer);
        },
        // 鼠标移出事件
        mouseOut() {
            const echartDom = this.$refs.chart;
            const myChart = echarts.init(echartDom);
            this.concelLegendEvent();
            this.setLegendEvent(myChart);
        },
        // 设置风向名称
        setFxMC(deg) {
            let fxmc = '';
            if (!this.$handleStr.hasValue(deg)) {
                fxmc = '-';
            } else if (deg == 0) {
                fxmc = '北风';
            } else if (deg < 45) {
                fxmc = '东北偏北风';
            } else if (deg == 45) {
                fxmc = '东北风';
            } else if (deg < 90) {
                fxmc = '东北偏东风';
            } else if (deg == 90) {
                fxmc = '东风';
            } else if (deg < 135) {
                fxmc = '东南偏东风';
            } else if (deg == 135) {
                fxmc = '东南风';
            } else if (deg < 180) {
                fxmc = '东南偏南风';
            } else if (deg == 180) {
                fxmc = '南风';
            } else if (deg < 225) {
                fxmc = '西南偏南风';
            } else if (deg == 225) {
                fxmc = '西南风';
            } else if (deg < 270) {
                fxmc = '西南偏西风';
            } else if (deg == 270) {
                fxmc = '西风';
            } else if (deg < 315) {
                fxmc = '西北偏西风';
            } else if (deg == 315) {
                fxmc = '西北风';
            } else if (deg < 360) {
                fxmc = '西北偏北风';
            } else if (deg == 360) {
                fxmc = '北风';
            }
            return fxmc;
        },
        // 设置风向图标的旋转角度
        setRotate(deg) {
            const fxmc = this.setFxMC(deg);
            // 正数表示逆时针旋转
            const rotateObj = {
                '-': 0,
                北风: 0,
                东北偏北风: -20,
                东北风: -45,
                东北偏东风: -70,
                东风: -90,
                东南偏东风: -110,
                东南风: -135,
                东南偏南风: -160,
                南风: -180,
                西南偏南风: -200,
                西南风: -225,
                西南偏西风: -250,
                西风: -270,
                西北偏西风: -290,
                西北风: -315,
                西北偏北风: -340
            };
            return rotateObj[fxmc];
        }
    }
};
</script>
<style lang="scss" scoped>
.echart-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .echart_contain {
        width: 100%;
        height: 100%;
    }

    .img {
        width: 65%;
    }
}
</style>
